// https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/drag_event
let dragged: HTMLElement

export const useDrag = () => {
  // ondragestart 被拖拽开始事件
  const elDragStart = (el: HTMLElement) => {
    el.addEventListener('dragstart', function (event: any) {
      // 保存被拖动元素的引用
      dragged = event.target
      // 设置为半透明
      event.target.classList.add('dragging')
    })
  }

  // 被拖拽元素进行中事件
  const elDrag = (el: HTMLElement) => {
    el.addEventListener('drag', () => {
      console.log('drag --- 拖拽进行中事件')
    })
  }

  // 被拖拽元素结束事件
  const elDrageEnd = (el: HTMLElement) => {
    el.addEventListener('dragend', (event: any) => {
      console.log('dragend --- 被拖拽元素结束事件')
      // 拖动结束，重置透明度
      event.target.classList.remove('dragging')
    })
  }

  // 被拖拽元素进入目标元素事件（基于鼠标位置看是否进入目标元素范围）
  const elTargetEnter = (target: HTMLElement) => {
    target.addEventListener('dragenter', function (event: any) {
      console.log('dragenter --- 被拖拽元素进入目标元素事件')
      // 在可拖动元素进入潜在的放置目标时高亮显示该目标
      if (event.target.classList.contains('dropzone')) {
        event.target.classList.add('dragover')
      }
    })
  }

  // 被拖拽元素在目标元素上移动
  const elTargetOver = (target: HTMLElement) => {
    target.addEventListener('dragover', function (e) {
      e.preventDefault() //取消dragover的默认行为
      console.log('dragover --- 被拖拽元素在目标元素上移动')
    })
  }

  // 被拖拽元素离开目标元素事件
  const elTargetLeave = (target: HTMLElement) => {
    target.addEventListener('dragleave', function (event: any) {
      console.log('dragleave --- 被拖拽元素离开目标元素事件')
      // 在可拖动元素离开潜在放置目标元素时重置该目标的背景
      if (event.target.classList.contains('dropzone')) {
        event.target.classList.remove('dragover')
      }
    })
  }

  // 被拖拽元素在目标元素范围上释放
  /*
    target: 目标元素
    el: 被拖拽的元素  --- > 暂时废弃
  */
  const elTargetDrop = (target: HTMLElement, el?: HTMLElement) => {
    target.addEventListener('drop', function (event: any) {
      event.preventDefault()
      console.log('drop --- 被拖拽元素在目标元素范围上释放')
      // 将被拖动元素移动到选定的目标元素中
      if (event.target.classList.contains('dropzone')) {
        event.target.classList.remove('dragover')
        dragged && dragged.parentNode && dragged.parentNode.removeChild(dragged)
        event.target.appendChild(dragged)
      }
    })
  }

  return {
    elDragStart,
    elDrag,
    elDrageEnd,
    elTargetEnter,
    elTargetOver,
    elTargetLeave,
    elTargetDrop
  }
}
